<template>
  <div class="sMSVerification">
    <van-nav-bar title="短信验证" left-arrow fixed @click-left="onClickLeft" />
    <p>
      您正在发起
      <span>{{ name }}</span>
      密码业务，短信验证码已下发手机尾号为
      <span>{{ getPhone }}</span>
      用户手机请查收
    </p>
    <van-cell-group>
      <van-field v-model="sms" center clearable placeholder="请输入短信验证码">
        <template #button>
          <van-button size="small" type="primary" @click="smsClick">{{
            tvSms
          }}</van-button>
        </template>
      </van-field>
    </van-cell-group>

    <div></div>

    <van-button class="next" block @click="nextClick">下一步</van-button>
  </div>
</template>
<script>
import { getApiForgetPassword, getApiSms } from "network/ApiServe";
export default {
  name: "SMSVerification",
  data() {
    return {
      sms: "",
      name: this.$route.params.name,
      password: this.$route.params.password,
      phone: this.$route.params.phone,
      tvSms: "发送验证码",
      timeSS: 61,
    };
  },
  computed: {
    getPhone() {
      return this.phone.substring(this.phone.length - 4);
    },
  },
  mounted() {
    this.Interval();
  },
  methods: {
    onClickLeft() {
      console.log(this.$route.params.name);
      this.$router.back(-1);
    },
    nextClick() {
      console.log("phone:" + this.phone);
      console.log("passsword:" + this.password);
      console.log("sms:" + this.sms);
      if (this.sms == null) {
        this.$toast("请输入验证码");
        return;
      }
      getApiForgetPassword(this.phone, this.password, this.sms)
        .then((res) => {
          console.log(JSON.stringify(res));
          if (res.resp_code != "000000") {
            this.$toast(res.resp_message);
            return;
          }
          this.$toast(res.resp_message);
          this.$router.back(-1);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    Interval() {
      const timer = setInterval(() => {
        this.timeSS--;
        if (this.timeSS === 0) {
          clearInterval(timer);
          this.timeSS = 61;
          this.tvSms = "发送验证码";
        } else {
          this.tvSms = "剩余" + this.timeSS + "s";
        }
      }, 1000);
    },
    smsClick() {
      this.Interval();
      getApiSms(this.phone)
        .then((res) => {
          if (res.resp_code != "000000") {
            this.$toast(res.resp_message);
            return;
          }
          this.$toast(res.resp_message);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style  scoped>
p {
  margin-top: 46px;
  font-size: 16px;
  width: 315px;
  margin: 96px auto 30px;
}
p span {
  margin: 0 2px;
  color: #f1ce8a;
}
.next {
  background-color: #f1ce8a;
  color: #fff;
  margin-top: 20px;
  margin-left: 20px;
  width: 335px;
}
.van-cell-group {
  width: 306px;
  display: block;
  margin: 0 auto;
}
</style>
